@import "./icon.css";

page {
	background: #f7f7f7;
}

.container {
	padding-bottom: 110upx;
}

.tui-header-box {
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9998;
}

.tui-header {
	width: 100%;
	font-size: 18px;
	line-height: 18px;
	font-weight: 500;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tui-header-icon {
	position: fixed;
	top: 0;
	left: 10px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	height: 32px;
	transform: translateZ(0);
	z-index: 99999;
}



.tui-header-icon .tui-badge {
	background: #e41f19 !important;
	position: absolute;
	right: -4px;
}

.tui-icon-ml {
	margin-left: 20upx;
}

.tui-icon {
	border-radius: 16px;
}


.tui-icon-back {
	height: 32px !important;
	width: 32px !important;
	display: block !important;
}

.tui-header-icon .tui-icon-more-fill {
	height: 20px !important;
	width: 20px !important;
	padding: 6px !important;
	display: block !important;
}

.tui-banner-swiper {
	position: relative;
}

.tui-banner-swiper .tui-tag-class {
	position: absolute;
	color: #fff;
	bottom: 30upx;
	right: 0;
}

.tui-slide-image {
	width: 100%;
	display: block;
}

/*顶部菜单*/

.tui-menu-box {
	box-sizing: border-box;
}

.tui-menu-header {
	font-size: 34upx;
	color: #fff;
	height: 32px;
	display: flex;
	align-items: center;
}

.tui-top-dropdown {
	z-index: 9999 !important;
}

.tui-menu-itembox {
	color: #fff;
	padding: 40upx 10upx 0 10upx;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	font-size: 26upx;
}

.tui-menu-item {
	width: 22%;
	height: 160upx;
	border-radius: 24upx;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	background: rgba(0, 0, 0, 0.4);
	margin-right: 4%;
	margin-bottom: 4%;
}

.tui-menu-item:nth-of-type(4n) {
	margin-right: 0;
}

.tui-badge-box {
	position: relative;
}

.tui-badge-box .tui-badge-class {
	position: absolute;
	top: -8px;
	right: -8px;
}

.tui-msg-badge {
	top: -10px;
}

.tui-icon-up {
	position: relative;
	display: inline-block;
	left: 50%;
	transform: translateX(-50%);
}

.tui-menu-text {
	padding-top: 12upx;
}

.tui-opcity .tui-menu-text,
.tui-opcity .tui-badge-box {
	opacity: 0.5;
	transition: opacity 0.2s ease-in-out;
}

/*顶部菜单*/

/*内容 部分*/

.tui-padding {
	padding: 0 30upx;
	box-sizing: border-box;
}

.tui-size {
	font-size: 24upx;
	line-height: 24upx;
}

.tui-gray {
	color: #999;
}

.tui-icon-red {
	color: #ff201f;
}

.tui-border-radius {
	border-bottom-left-radius: 24upx;
	border-bottom-right-radius: 24upx;
	overflow: hidden;
}

.tui-radius-all {
	border-radius: 24upx;
	overflow: hidden;
}

.tui-mtop {
	margin-top: 26upx;
}

.tui-pro-detail {
	box-sizing: border-box;
	color: #333;
}

.tui-product-title {
	background: #fff;
	padding: 30upx 0;
}

.tui-pro-pricebox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #ff201f;
	font-size: 36upx;
	font-weight: bold;
	line-height: 44upx;
}

.tui-pro-price {
	display: flex;
	align-items: center;
}

.tui-pro-price .tui-tag-class {
	transform: scale(0.7);
	transform-origin: center center;
	line-height: 24upx;
	font-weight: normal;
}

.tui-price {
	font-size: 58upx;
}

.tui-original-price {
	font-size: 26upx;
	line-height: 26upx;
	padding: 10upx 30upx;
	box-sizing: border-box;
}

.tui-line-through {
	text-decoration: line-through;
}

.tui-collection {
	color: #333;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	height: 44upx;
}

.tui-scale {
	transform: scale(0.7);
	transform-origin: center center;
	line-height: 24upx;
	font-weight: normal;
}

.tui-icon-collection {
	line-height: 20px !important;
	margin-bottom: 0 !important;

}

.tui-pro-titbox {
	font-size: 32upx;
	font-weight: 500;
	position: relative;
	padding: 0 150upx 0 30upx;
	box-sizing: border-box;
}

.tui-pro-title {
	padding-top: 20upx;
}

.tui-share-btn {
	display: block;
	background: none;
	margin: 0;
	padding: 0;
	border-radius: 0;
}

.tui-tag-share {
	display: flex;
	align-items: center;
}

.tui-share-position {
	position: absolute;
	right: 0;
	top: 30upx;
}

.tui-share-text {
	padding-left: 8upx;
}

.tui-sub-title {
	padding: 20upx 0;
}

.tui-sale-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 30upx;
}

.tui-discount-box {
	background: #fff;
}

.tui-list-cell {
	position: relative;
	display: flex;
	align-items: center;
	font-size: 26upx;
	line-height: 26upx;
	padding: 36upx 30upx;
	box-sizing: border-box;
}

.tui-right {
	position: absolute;
	right: 30upx;
	top: 30upx;
}

.tui-top40 {
	top: 40upx !important;
}

.tui-bold {
	font-weight: bold;
}

.tui-list-cell::after {
	content: '';
	position: absolute;
	border-bottom: 1upx solid #eaeef1;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	bottom: 0;
	right: 0;
	left: 126upx;
}

.tui-last::after {
	border-bottom: 0 !important;
}

.tui-tag-coupon-box {
	display: flex;
	align-items: center;
}

.tui-tag-coupon-box .tui-tag-class {
	margin-right: 20upx;
}


.tui-cell-title {
	width:120upx;
	padding-right: 30upx;
	flex-shrink: 0;
}

.tui-promotion-box {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 10upx 0;
	width: 74%;
}

.tui-promotion-box .tui-tag-class {
	display: inline-block !important;
	transform: scale(0.8);
	transform-origin: 0 center;
}
.tui-basic-info {
	background: #fff;
}

.tui-addr-box {
	width: 76%;
}

.tui-addr-item {
	padding: 10upx;
	line-height: 34upx;
}

.tui-guarantee {
	background: #fdfdfd;
	display: flex;
	flex-wrap: wrap;
	padding: 20upx 30upx 30upx 30upx;
	font-size: 24upx;
}

.tui-guarantee-item {
	color: #999;
	padding-right: 30upx;
	padding-top: 10upx;
}

.tui-pl {
	padding-left: 4upx;
}

.tui-cmt-box {
	background: #fff;
}

.tui-between {
	justify-content: space-between !important;
}

.tui-cmt-all {
	color: #ff201f;
	padding-right: 8upx;
}

.tui-cmt-content {
	font-size: 26upx;
}

.tui-cmt-user {
	display: flex;
	align-items: center;
}

.tui-acatar {
	width: 60upx;
	height: 60upx;
	border-radius: 30upx;
	display: block;
	margin-right: 16upx;
}

.tui-cmt {
	padding: 14upx 0;
}

.tui-attr {
	font-size: 24upx;
	color: #999;
	padding: 6upx 0;
}

.tui-cmt-btn {
	padding: 50upx 0 30upx 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tui-tag-cmt {
	min-width: 130upx;
	padding: 20upx 52upx !important;
	font-size: 26upx !important;
	display: inline-block;
}

.tui-nomore-box {
	padding-top: 10upx;
}

.tui-product-img {
	transform: translateZ(0);
}

.tui-product-img image {
	width: 100%;
	display: block;
}

/*底部操作栏*/

.tui-col-7 {
	width: 58.33333333%;
}

.tui-col-5 {
	width: 41.66666667%;
}

.tui-operation {
	width: 100%;
	height: 100upx;
	/* box-sizing: border-box; */
	background: rgba(255, 255, 255, 0.98);
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 10;
	bottom: 0;
	left: 0;
	padding-bottom: env(safe-area-inset-bottom);
}

.tui-safearea-bottom {
	width: 100%;
	height: env(safe-area-inset-bottom);
}

.tui-operation::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	border-top: 1upx solid #eaeef1;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
}

.tui-operation-left {
	display: flex;
	align-items: center;
}

.tui-operation-item {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
}

.tui-operation-text {
	font-size: 22upx;
	color: #333;
}

.tui-opacity {
	opacity: 0.5;
}

.tui-scale-small {
	transform: scale(0.9);
	transform-origin: center center;
}

.tui-operation-right {
	height: 100upx;
	/* box-sizing: border-box; */
	padding-top: 0;
}

.tui-right-flex {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tui-btnbox-4 .tui-btn-class {
	width: 90% !important;
	display: block !important;
	font-size: 28upx !important;
}

.tui-operation .tui-badge-class {
	position: absolute;
	top: -6upx;
	/* #ifdef H5 */
	transform: translateX(50%)
	/* #endif  */
}

.tui-flex-1 {
	flex: 1;
}

/*底部操作栏*/

/*底部选择弹层*/

.tui-popup-class {
	border-top-left-radius: 24upx;
	border-top-right-radius: 24upx;
	padding-bottom: env(safe-area-inset-bottom);
}

.tui-popup-box {
	position: relative;
	padding: 30upx 0 100upx 0;
}

.tui-popup-btn {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
}

.tui-popup-btn .tui-btn-class {
	width: 90% !important;
	display: block !important;
	font-size: 28upx !important;
}

.tui-icon-close {
	position: absolute;
	top: 30upx;
	right: 30upx;
}

.tui-product-box {
	display: flex;
	align-items: flex-end;
	font-size: 24upx;
	padding-bottom: 30upx;
}

.tui-popup-img {
	height: 200upx;
	width: 200upx;
	border-radius: 24upx;
	display: block;
}

.tui-popup-price {
	padding-left: 20upx;
	padding-bottom: 8upx;
}

.tui-amount {
	color: #ff201f;
	font-size: 36upx;
}

.tui-number {
	font-size: 24upx;
	line-height: 24upx;
	padding-top: 12upx;
	color: #999;
}

.tui-popup-scroll {
	height: 600upx;
	font-size: 26upx;
}

.tui-scrollview-box {
	padding: 0 30upx 60upx 30upx;
	box-sizing: border-box;
}

.tui-attr-title {
	padding: 10upx 0;
	color: #333;
}

.tui-attr-box {
	font-size: 0;
	padding: 20upx 0;
}

.tui-attr-item {
	max-width: 100%;
	min-width: 200upx;
	height: 64upx;
	display: -webkit-inline-flex;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f7f7f7;
	padding: 0 26upx;
	box-sizing: border-box;
	border-radius: 32upx;
	margin-right: 20upx;
	margin-bottom: 20upx;
	font-size: 26upx;
}

.tui-attr-active {
	background: #fcedea !important;
	color: #e41f19;
	font-weight: bold;
	position: relative;
}

.tui-attr-active::after {
	content: "";
	position: absolute;
	border: 1upx solid #e41f19;
	width: 100%;
	height: 100%;
	border-radius: 40upx;
	left: 0;
	top: 0;
}

.tui-number-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20upx 0 30upx 0;
	box-sizing: border-box;
}

/*底部选择弹层*/